//real value for running
var currentRatio = 0.5;
var currentIboxWidth = 600;
var currentIboxHeight = 300;

//predefine value
var bigScreenRatio = 2/3;
var standardRatio = 0.5;
var iboxWidthMax = 800;
var iboxHeightMax = 400;
var standardWidthResolution = 1280;
var standardHeightResolution = 1024;

(function($) {
	 //find the zooming ratio
	if ((screen.width>standardWidthResolution && screen.height>standardHeightResolution))
		{
			currentRatio = bigScreenRatio;
            currentIboxHeight = iboxHeightMax;
            currentIboxWidth = iboxWidthMax;
		}
	
    $.fn.ibox = function() {
        var img = this;
        
        //append ibox to img
        img.parent().append('<div id="ibox" />');
        var ibox = $('#ibox');
        
        //ibox position
        var elX = 0;
        var elY = 0;        
        img.each(function() {
        	//image click event handler
            var el = $(this);
            
            //handle mousedown event on image
            el.mousedown(function(e) {
            	var imgTop = el.position().top;
                var imgLeft = el.position().left;
                
            	//hide current ibox 
            	hideIbox();
            	
            	//zoom image map
                zoomOutMap(el.attr('id'));
                
                //detect ibox position
                elX = ((screen.width)/2)-el.width(); 
                elY = ((screen.height)/3)-(el.height()/2);
                $(this).clone().prependTo(ibox);
                ibox.css({
                    top: imgTop + 'px',
                    left: imgLeft + 'px'
                });
                
                //append buttons
                ibox.append('</br>');
                ibox.append('<div style="align:center;margin:5px;">');
                ibox.append('<a class="bosch_first_button_style" href="javascript:exportToExcel(\''+el.attr('id')+'\');">Export</a>');
                ibox.append('<a class="bosch_button_style" href="javascript:hideIbox();">Close</a>');
                ibox.append('</div');
                
                //show ibox
                ibox.stop().fadeTo(200, 1, function() {
                		$(this).animate({top:elY,left:elX},400).children('img').animate({top:elY,left:elX,height:currentIboxHeight,width:currentIboxWidth},400);
                });
            });           
        });
    };
})(jQuery);

$(document).ready(function() {
    $('#images img').ibox();
});

function hideIbox()
{
	var currentOpenImg = $('#ibox').find('img').map(function(){
        return this.id;
    }).get(0);
	zoomMap(currentOpenImg,standardRatio);
	$('#ibox').html('').hide();
}

function zoomMap(imgId,fraction)
{
	var chart = document.getElementById(imgId);
	if (chart != null)
		{
			var useMap = chart.getAttribute("usemap");
			useMap = useMap.replace("#", "");
			zoom(fraction,useMap);
		}
}

function zoomInMap(imgId)
{
	zoomMap(imgId,standardRatio);
}

function zoomOutMap(imgId)
{
	zoomMap(imgId,1/standardRatio);
}

function zoom(amount,mapId) {
    // resize image map
    var map = document.getElementById(mapId);
    if (map != null)
    	{
		    for (var i = 0; i < map.areas.length; i++) {
		      var area = map.areas[i];
		      var coords = area.coords.split(',');
		      for (var j = 0; j < coords.length; j++) {
		        coords[j] = coords[j] * amount;
		      }
		      var tempCoord = coords[0];
		      for (var k = 1; k< coords.length; k++)    	  
		    	  tempCoord = tempCoord + ',' + coords[k];
		      area.coords = tempCoord;
		    }
    	}
  }

function zoomMapFirstTime(imgId)
{
	zoomMap(imgId, currentRatio);
	$('#images img#'+imgId).css({
		width: (currentIboxWidth/2)+'px',
		height: (currentIboxHeight/2)+'px'
	});
	
}